<!-- 专项督导信息 -->
<template>
  <div>
    <el-form label-suffix="：" label-position="left" style="display: flex;">
      <el-form-item label-width="55px" label="学期">
        <el-select v-model="queryForm.semester" size="mini" placeholder="请选择学期" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in semesterList" :key="index" :label="item.xqmc" :value="item.xqmc" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="55px" label="状态" v-if="roleId === '1490880469703041025' || roleId === '1490880658945843202' ">
        <el-select v-model="queryForm.status" size="mini" clearable placeholder="请选择状态" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in statusList" :key="index" :label="item.dictValue" :value="item.dictKey" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="55px" label="月份">
        <el-select v-model="queryForm.month" size="mini" clearable placeholder="请选择月份" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in monthList" :key="index" :label="item.dictValue" :value="item.dictKey" />
        </el-select>
      </el-form-item>
      <div class="button-style" style="margin-top: 6px;" @click="handleSearch">
        <img src="@/assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
      <div style="margin-left: auto;">
        <div class="button-style" style="margin: 6px 20px 0 auto;" @click="handleBatchPass" v-if="roleId == '1490880658945843202' || roleId == '1490880469703041025'">
          <span>批量通过</span>
        </div>
        <!-- <div v-if="roleId === '1490859421955674114'" class="button-style" style="margin: 6px 20px 0 auto;" @click="handleBatchPass">
          <span>批量通过</span>
        </div> -->
        <div v-if="roleId === '1490880469703041025' || roleId === '1490880658945843202' || roleId === '1490859421955674114'" class="button-style" style="margin-top: 6px; border-color: #FB391F; background-color: #FDEFEF;" @click="handleAdd">
          <span style="color: #FB391F;">新增专项督导信息</span>
        </div>
      </div>
    </el-form>
    <el-table
      border
      :data="tableData"
      class="xpaas-table-class"
      @selection-change="handleSelectionChange"
      row-class-name="xpaas-row-class"
      cell-class-name="xpaas-cell-class"
      header-row-class-name="xpaas-header-row-class"
      header-cell-class-name="xpaas-header-cell-class">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column v-if="roleId === '1490880469703041025' || roleId === '1490880658945843202' || roleId === '1490859421955674114'" :key="1" label="操作" width="180" align="center">
        <template slot-scope="scope">
          <div style="display: flex; justify-content: center;">
            <div v-if="scope.row.shzt === '1'" class="button-style" style="" @click="handlePass(scope.row)">
              <img src="@/assets/assessment/icon-pass.png" alt="" />
              <span>通过</span>
            </div>
            <div v-if="scope.row.shzt === '1'" class="button-style" style="margin-left: 10px; border-color: #FB391F; background-color: #FDEFEF;" @click="handleRefuse(scope.row)">
              <img src="@/assets/assessment/icon-ydh.png" alt="" />
              <span style="color: #FB391F;">打回</span>
            </div>
            <div v-if="scope.row.shzt === '0' || scope.row.shzt === '3'" class="button-style" style="border-color: #04C670; background-color: #F1FFFA;" @click="handleEdit(scope.row)">
              <img src="@/assets/assessment/icon-plan-record-detail.png" alt="" />
              <span style="color: #04C670;">修改</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="roleId === '1490880469703041025' || roleId === '1490880658945843202' || roleId === '1490859421955674114'" :key="2" prop="status" label="状态" show-overflow-tooltip align="center" />
      <el-table-column prop="rwmc" label="任务名称" show-overflow-tooltip align="center" />
      <el-table-column prop="sj" label="时间" show-overflow-tooltip align="center" />
      <el-table-column prop="tkjc" label="听课节次" show-overflow-tooltip align="center" />
      <el-table-column prop="dd" label="地点" show-overflow-tooltip align="center" />
      <el-table-column v-if="roleId === '1490859421955674114'" :key="3" prop="ddzjxm" min-width="150" label="听课人" show-overflow-tooltip align="center" />
      <el-table-column prop="btkrxm" label="被听课人姓名" show-overflow-tooltip align="center" />
      <el-table-column prop="zzdw" label="组织单位" show-overflow-tooltip align="center" />
      <el-table-column prop="lxr" label="联系人" show-overflow-tooltip align="center" />
    </el-table>
    <div v-if="roleId === '1496015526935564290' || roleId === '1498848865273745410'" class="button-style" style="width: auto; margin-top: 15px; border-color: #f3b815; background-color: #fff6ef;">
      <img src="@/assets/assessment/icon-export.png" />
      <download-excel
        :data="tableData"
        :fields="jsonFields"
        type="xls"
        name="专项督导信息.xls"
        style="color: #f3b815; font-size: 14px;">
        <span>导出Excel</span>
      </download-excel>
    </div>
    <div style="float: right; margin-top: 15px; padding-bottom: 15px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="padding: 0;">
      </el-pagination>
    </div>
    <el-dialog title="新增专项督导信息" :visible.sync="dialogShow" :close-on-click-modal="false" width="1200px">
      <div class="my-form-container" style="width: 100% !important; height: 100%; margin: 0;">
        <el-form hide-required-asterisk="true">
          <div style="display: flex;">
            <el-form-item class="my-form-item" prop="ddzjxm">
              <div class="my-form-item-label">
                督导专家姓名
              </div>
              <el-input v-model="formData.ddzjxm" class="itemInput" readonly placeholder="请选择督导专家姓名" style="margin-right: 15px;" />
              <el-button icon="el-icon-plus" circle class="circleButton" @click="handleSelect"></el-button>
            </el-form-item>
            <el-form-item class="my-form-item" prop="rwmc">
              <div class="my-form-item-label">
                任务名称
              </div>
              <el-input v-model="formData.rwmc" class="itemInput" placeholder="请输入任务名称" />
            </el-form-item>
          </div>
          <div style="display: flex;">
            <el-form-item class="my-form-item" prop="btkrxm">
              <div class="my-form-item-label">
                被听课人姓名
              </div>
              <el-input v-model="formData.btkrxm" class="itemInput" placeholder="请输入被听课人姓名" />
            </el-form-item>
            <el-form-item class="my-form-item" prop="sj">
              <div class="my-form-item-label">
                时&emsp;&emsp;间
              </div>
              <el-date-picker v-model="formData.sj" type="date" value-format="yyyy-MM-dd" class="itemInput" placeholder="请选择时间" />
            </el-form-item>
          </div>
          <div style="display: flex;">
            <el-form-item class="my-form-item" prop="xueqi">
              <div class="my-form-item-label">
                学&emsp;&emsp;期
              </div>
              <el-select v-model="formData.xueqi" class="itemInput" placeholder="请选择学期">
                <el-option v-for="(item, index) in semesterList" :key="index" :label="item.xqmc" :value="item.xqmc" />
              </el-select>
            </el-form-item>
            <el-form-item class="my-form-item" prop="month">
              <div class="my-form-item-label">
                月&emsp;&emsp;份
              </div>
              <el-select v-model="formData.month" class="itemInput" placeholder="请选择月份">
                <el-option v-for="(item, index) in monthList" :key="index" :label="item.dictValue" :value="item.dictKey" />
              </el-select>
            </el-form-item>
          </div>
          <div style="display: flex;">
            <el-form-item class="my-form-item" prop="tkjc">
              <div class="my-form-item-label">
                听课节次
              </div>
              <el-input v-model="tkjc_sub1" style="width: 40px; margin: 22px 0 22px 40px;" placeholder="请输入听课节次" />
              <span style="margin-top: 22px;">&emsp;-&emsp;</span>
              <el-input v-model="tkjc_sub2" style="width: 40px; margin: 22px 0;" placeholder="请输入听课节次" />
              <span style="margin-top: 22px; color: red;">*注：单节课填写示例：3-3</span>
            </el-form-item>
            <el-form-item class="my-form-item" prop="dd">
              <div class="my-form-item-label">
                地&emsp;&emsp;点
              </div>
              <el-input v-model="formData.dd" class="itemInput" placeholder="请输入地点" />
            </el-form-item>
          </div>
          <div style="display: flex;">
            <el-form-item class="my-form-item" prop="zzdw">
              <div class="my-form-item-label">
                组织单位
              </div>
              <el-input v-model="formData.zzdw" class="itemInput" placeholder="请输入组织单位" />
            </el-form-item>
            <el-form-item class="my-form-item" prop="lxr">
              <div class="my-form-item-label">
                联&nbsp;&nbsp;系&nbsp;&nbsp;人
              </div>
              <el-input v-model="formData.lxr" class="itemInput" readonly placeholder="请输入联系人" />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div style="display: flex; justify-content: center; margin-top: 25px;">
        <div class="button-style" style="border-color: #E9B535; background: #FFF6F0;" @click="handleSave">
          <span style="color: #E9B535;">保&nbsp;存</span>
        </div>
        <div class="button-style" style="border-color: #04C670; background: #F1FFFA; margin-left: 100px;" @click="handleSubmit">
          <span style="color: #04C670;">提&nbsp;交</span>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="选择督导专家" :visible.sync="dialogShow1" :close-on-click-modal="false" width="650px">
      <el-transfer
        filterable
        :filter-method="handleFilter"
        :titles="['可选督导专家', '已选督导专家']"
        filter-placeholder="请输入督导专家姓名"
        v-model="transferValue"
        :data="transferData">
      </el-transfer>
      <div class="button-style" style="margin-top: 20px; margin-left: calc(50% - 27px); border-color: #E9B535; background: #FFF6F0;" @click="handleSure">
        <span style="color: #E9B535;">确&nbsp;定</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getStore } from '@/util/store.js'
import { reqGetXqList, queryDictByCode } from '@/api/admin1/check'
import { querySpecialList, queryAllExpert, querySpecialDetail, insertSpecialInfo, updateSpecialInfo, batchPass } from '@/api/teachingEvaluation/summary'
export default {
  data() {
    return {
      roleId: '',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      dialogShow: false,
      dialogShow1: false,
      transferValue: [],
      transferData: [],
      queryForm: {
        semester: '',
        status: '',
        month: ''
      },
      semesterList: [],
      statusList: [],
      monthList: [],
      selections: [],
      formData: {
        ddzjxm: '',
        rwmc: '',
        btkrxm: '',
        sj: '',
        tkjc: '',
        dd: '',
        zzdw: '',
        lxr: '',
        xueqi: '',
        month: '',
        operateType: ''
      },
      tkjc_sub1: '',
      tkjc_sub2: '',
      jsonFields: {
        序号: 'index',
        任务名称: 'rwmc',
        时间: 'sj',
        听课节次: 'tkjc',
        地点: 'dd',
        被听课人姓名: 'btkrxm',
        组织单位: 'zzdw',
        联系人: 'lxr'
      }
    }
  },
  mounted() {
    const userInfo = getStore({
      name: "userInfo",
      debug: true,
    }) || {}
    this.roleId = userInfo.content.role_id
    this.formData.lxr = userInfo.content.name
    reqGetXqList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.semesterList = res.data.data
        this.queryForm.semester = res.data.data[0].xqmc
      }
    })
    queryDictByCode('specialStatus').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.statusList = res.data.data
      }
    })
    queryDictByCode('month').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.monthList = res.data.data
        this.handleSearch()
      }
    })
  },
  methods: {
    handleSearch: function () {
      const params = {
        xueqi: this.queryForm.semester,
        shzt: this.queryForm.status,
        month: this.queryForm.month,
        current: this.pageNo,
        size: this.pageSize
      }
      querySpecialList(params).then(res => {
        if (res.data.data) {
          this.tableData = res.data.data.records
          this.tableData.forEach((item) => {
            const tableItem = this.statusList.find(record => {
              return record.dictKey === item.shzt
            })
            item.status = tableItem.dictValue
          })
          this.total = res.data.data.total
        } else {
          this.tableData = []
          this.total = 0
        }
      })
    },
    handleAdd: function () {
      this.formData.operateType = 'add'
      this.formData.ddzjxm = ''
      this.formData.rwmc = ''
      this.formData.btkrxm = ''
      this.formData.sj = ''
      this.formData.tkjc = ''
      this.formData.dd = ''
      this.formData.zzdw = ''
      this.formData.xueqi = ''
      this.formData.month = ''
      this.tkjc_sub1 = ''
      this.tkjc_sub2 = ''
      this.dialogShow = true
    },
    handleSelectionChange: function (val) {
      this.selections = val
    },
    handleBatchPass: function () {
      const array = this.selections.filter(record => {
        return record.shzt === '1'
      })
      if (array.length > 0) {
        let params = []
        array.forEach(item => {
          params.push({
            id: item.id,
            shzt: '2'
          })
        })
        batchPass(params).then(res => {
          if (res.data.code === 200) {
            this.handleSearch()
            this.$message({
              message: '批量审核通过成功！',
              type: 'success'
            })
          } else {
            this.$message({
              message: '批量审核通过失败！',
              type: 'warning'
            })
          }
        })
      } else {
        this.$message({
          message: '无可审核的数据！',
          type: 'warning'
        })
      }
    },
    handlePass: function (row) {
      const params = {
        id: row.id,
        shzt: '2'
      }
      updateSpecialInfo(params).then(res => {
        if (res.data.code === 200) {
          this.handleSearch()
          this.$message({
            message: '专项督导信息审核通过成功！',
            type: 'success'
          })
        } else {
          this.$message({
            message: '专项督导信息审核通过失败！',
            type: 'warning'
          })
        }
      })
    },
    handleRefuse: function (row) {
      const params = {
        id: row.id,
        shzt: '3'
      }
      updateSpecialInfo(params).then(res => {
        if (res.data.code === 200) {
          this.handleSearch()
          this.$message({
            message: '专项督导信息审核打回成功！',
            type: 'success'
          })
        } else {
          this.$message({
            message: '专项督导信息审核打回失败！',
            type: 'warning'
          })
        }
      })
    },
    handleEdit: function (row) {
      this.formData.operateType = 'edit'
      const params = { id: row.id }
      querySpecialDetail(params).then(res => {
        if (res.data.data) {
          this.formData = res.data.data
          if (this.formData.tkjc !== '') {
            const array = this.formData.tkjc.split('-')
            this.tkjc_sub1 = array[0]
            this.tkjc_sub2 = array[1]
          }
        }
      })
      this.dialogShow = true
    },
    handleSelect: function () {
      this.transferData = []
      this.transferValue = []
      queryAllExpert().then(res => {
        if (res.data.data) {
          res.data.data.forEach(item => {
            this.transferData.push(
              { key: item.id, label: item.xm }
            )
          })
        } else {
          this.transferData = []
        }
      })
      this.dialogShow1 = true
    },
    handleSave: function () {
      this.formData.shzt = '0'
      this.formData.tkjc = this.tkjc_sub1 + '-' + this.tkjc_sub2
      if (this.formData.operateType === 'add') {
        insertSpecialInfo(this.formData).then(res => {
          if (res.data.code === 200) {
            this.dialogShow = false
            this.handleSearch()
            this.$message({
              message: '专项督导信息保存成功！',
              type: 'success'
            })
          } else {
            this.$message({
              message: '专项督导信息保存失败！',
              type: 'warning'
            })
          }
        })
      } else {
        updateSpecialInfo(this.formData).then(res => {
          if (res.data.code === 200) {
            this.dialogShow = false
            this.handleSearch()
            this.$message({
              message: '专项督导信息保存成功！',
              type: 'success'
            })
          } else {
            this.$message({
              message: '专项督导信息保存失败！',
              type: 'warning'
            })
          }
        })
      }
    },
    handleSubmit: function () {
      this.formData.shzt = '1'
      this.formData.tkjc = this.tkjc_sub1 + '-' + this.tkjc_sub2
      if (this.formData.operateType === 'add') {
        insertSpecialInfo(this.formData).then(res => {
          if (res.data.code === 200) {
            this.dialogShow = false
            this.handleSearch()
            this.$message({
              message: '专项督导信息提交成功！',
              type: 'success'
            })
          } else {
            this.$message({
              message: '专项督导信息提交失败！',
              type: 'warning'
            })
          }
        })
      } else {
        updateSpecialInfo(this.formData).then(res => {
          if (res.data.code === 200) {
            this.dialogShow = false
            this.handleSearch()
            this.$message({
              message: '专项督导信息提交成功！',
              type: 'success'
            })
          } else {
            this.$message({
              message: '专项督导信息提交失败！',
              type: 'warning'
            })
          }
        })
      }
    },
    handleFilter: function (query, item) {
      return item.label.indexOf(query) > -1
    },
    handleSure: function () {
      if (this.transferValue.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择督导专家！',
          type: 'warning'
        })
      } else {
        let nameArray = []
        let selectItem
        this.transferValue.forEach(item => {
          selectItem = this.transferData.find(record => {
            return record.key === item
          })
          nameArray.push(selectItem.label)
        })
        this.formData.ddzjxm = nameArray.join(',')
        this.dialogShow1 = false
      }
    },
    handleCurrentChange: function (val) {
      this.pageNo = val
      this.handleSearch()
    },
    handleSizeChange: function (val) {
      this.pageSize = val
      this.handleSearch()
    }
  }
}
</script>

<style lang="less" scoped>
  .button-style {
    float: left;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
    > span {
      font-size: 14px;
      color: #51aef6;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  .my-form-item {
    width: 100%;
    height: 85px;
    border-bottom: 1px solid rgba(0, 76, 167, 0.39);
    margin-bottom: 0;
    > div {
      display: flex;
      height: 100%;
      &:nth-child(2) {
        .my-form-item-label {
          border-left: 1px solid rgba(0, 76, 167, 0.39);
        }
      }
      .my-form-item-label{
        width: 220px;
        padding-left: 60px;
        background: rgba(0, 76, 167, 0.1);
        display: flex;
        flex: none;
        align-items: center;
        color: #004CA7;
        font-size: 16px;
        font-weight: bold;
        border-left: 1px solid rgba(0, 76, 167, 0.39);
        margin-left: -1px;
        .mustW {
          color: red;
        }
      }
      .el-form-item__content{
        display: flex;
      }
    }
  }
  .itemInput {
    width: 100%;
    margin: 22px 40px 0;
  }
  .circleButton {
    width: 50px;
    height: 40px;
    margin: 25px 40px 0 0;
    color: #F66B00;
  }
  /deep/ .el-button {
    border-color: #F66B00;
  }
  /deep/ .el-form-item__label {
    color: #004ca7;
    font-size: 14px;
  }
  /deep/ .el-transfer-panel__body {
    height: 380px;
  }
  /deep/ .el-transfer-panel__list.is-filterable {
    height: 375px;
  }
  /deep/ .el-transfer__button:first-child {
    margin-top: 190px;
  }
  /deep/ .el-date-editor .el-input__icon {
    margin-top: -6px;
  }
</style>
